{include file="public/head"}

<body>
    <div class="com-class set-one">
        <div>头像</div>
        <form>
            <label class="head-portrait">
                <img src="" alt="图片丢失" />
                <!-- <input type="file" class="hide" name="file" readonly> -->
            </label>
        </form>
    </div>
    <div class="com-class set-two">
        <div>昵称</div>
        <div>
            <input type="text" placeholder="请输入昵称" name="nickname" readonly value="">
            <img src="__STATIC__/home/img/image11.png" alt="图片丢失" />
        </div>
    </div>
    <div class="com-class set-three">
        <div>性别</div>
        <div class="sex-wrap">
            <div class="sex-i" sex="1">
                <!-- <img src="__STATIC__/home/img/image8.png" alt="图片丢失" />
                <img src="__STATIC__/home/img/image9.png" alt="图片丢失" /> -->
                <div>男</div>
            </div>
            <div class="sex-i" sex="0">
                <!-- <img src="__STATIC__/home/img/image8.png" alt="图片丢失" />
                <img src="__STATIC__/home/img/image9.png" alt="图片丢失" /> -->
                <div>女</div>
            </div>
        </div>
    </div>
    <div class="com-class set-two">
        <div>真实姓名</div>
        <div>
            <input type="text" placeholder="请输入真实姓名" name="realname" value="">
            <img src="__STATIC__/home/img/image11.png" alt="图片丢失" />
        </div>
    </div>
    <div class="com-class set-two">
        <div>手机号</div>
        <div>
            <input type="number" placeholder="请输入手机号" name="phone" value="">
            <img src="__STATIC__/home/img/image11.png" alt="图片丢失" />
        </div>
    </div>
    <div style="height: 1.2rem;"></div>
    <div class="footer">
        <div class="preservation">
            保存
        </div>
    </div>


    <script src="__STATIC__/home/js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/home/js/public.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type: 'post',
                url: '/index/personal/userData',
                success(res) {
                    console.log(res)
                    if (res.code == 1) {
                        $('.head-portrait').children('img').attr('src', res.data.headimgurl);
                        $('input[name="nickname"]').val(res.data.nickname);
                        var status = res.data.sex;
                        if(status == 0) {

                        } else if(status == 1) {
                            // $('.sex-i').eq(0).addClass('sex-active');
                            $('.sex-i').eq(1).addClass('hide');
                        } else if (status == 2) {
                            // $('.sex-i').eq(1).addClass('sex-active');
                            $('.sex-i').eq(0).addClass('hide');
                        }
                        $('input[name="realname"]').val(res.data.true_name);
                        $('input[name="phone"]').val(res.data.phone);
                    }
                }
            });
            // 头像
            $(document).on('change', '.head-portrait', function () {
                let val = $(this).parents("form")[0];
                let formData = new FormData(val);
                $.ajax({
                    url: '/index/index/image.html',
                    cache: false,
                    type: 'post',
                    data: formData,
                    dataType: 'json',
                    contentType: false,
                    processData: false, //不处理数据
                    success: function (data) {
                        if (data.code == 1) {
                            $(".head-portrait").children("img").attr("src", data.url);
                        } else {
                            alert('图片上传失败!');
                        }
                    },
                    error: function () {
                        alert('图片上传错误!');
                    }
                });
            });
            // 选男女
            // $(document).on('click', '.sex-i', function () {
            //     $('.sex-active').removeClass('sex-active');
            //     $(this).addClass('sex-active');
            // });
            //保存
            $('.preservation').click(function () {
                // var headImg = $('.head-portrait').children('img').attr('src'); 
                // var nickname = $('input[name="nickname"]').val();
                // if(!nickname) {
                //     alert('请填写昵称');
                //     return false;
                // }
                // var sex = $('.sex-active').attr('sex');
                var realname = $('input[name="realname"]').val();
                if (!realname) {
                    alert('请填写真实姓名');
                    return false;
                }
                var phone = $('input[name="phone"]').val();
                if (!phone) {
                    alert('请填写手机号');
                    return false;
                }
                if (!(/^1\d{10}$/.test(phone))) {
                    alert('手机格式不正确');
                    return false;
                }
                $.ajax({
                    type: 'post',
                    url: '/index/personal/userSetup',
                    data: {
                        true_name: realname,
                        phone
                    },
                    success(res) {
                        alert(res.msg);
                        if (res.code == 1) {
                            var t = setTimeout(() => {
                                window.location.href = '/index/personal/personal';
                                clearTimeout(t);
                            }, 1000);
                        }
                    },
                    error() {
                        alert('更新信息接口错误');
                    }
                });
            });
        });
    </script>
</body>

</html>